<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜗牛商城后台管理系统</title>
</head>
<body>
	<!-- 标题栏 -->
	<jsp:include page="header.jsp"></jsp:include>
	<!-- 导航栏 -->
	<jsp:include page="navbar.jsp"></jsp:include>
	<!-- 数据展示 -->
	<div class="col-md-10 text-center panel" id="view">
		<!-- 展示操作路径 -->
		<div class="panel-heading text-left">
			<a href="welcome.jsp">商城管理</a>-> <a href="goodsTypeManage.jsp">商品类别管理</a>->
			<a href="javascript:void(0)">修改商品类别</a>
		</div>
		<div class="panel-body">
			<form class="form form-horizontal  col-md-push-1 col-md-10 ">
				<div class="form-group ">
					<div class="col-md-2 text-right">
						<label for="gtname">商品类别名：</label>
					</div>
					<div class="col-md-4">
						<input type="text" name="gtname" id="gtname"
							value="${goodsType.gtname}" onblur="checkGtname()"
							placeholder="请输入商品类别名" class="form-control" />
					</div>
					<div class="col-md-6 text-left">
						<span id="gtnameMsg">&nbsp;</span>
					</div>
				</div>
				<div class="form-group ">
					<div class="col-md-2 text-right">
						<label for="gtdesc">商品类别介绍：</label>
					</div>
					<div class="col-md-10">
						<textarea rows="5" cols="100%" name="gtdesc" id="gtdesc"
							onblur="checkGtdesc()" class="form-control"
							placeholder="请输入商品类别介绍">${goodsType.gtdesc}</textarea>
					</div>
					<div class="col-md-6 col-md-push-2 text-left">
						<span id="gtdescMsg">&nbsp;</span>
					</div>
				</div>
				<div class="form-group col-md-6">
					<button type="button" class="btn btn-md btn-success"
						onclick="update()">保存</button>
					<button type="reset" class="btn btn-md btn-warning">重置</button>
				</div>
			</form>
		</div>
	</div>
	<!-- 版权 -->
	<jsp:include page="footer.jsp"></jsp:include>
</body>
<script type="text/javascript">
	let gtnameFlag = false;

	function update() {
		if (gtnameFlag && checkGtdesc()) {//前端有效性校验
			$.ajax({
				url : "../goodsType",
				type : "post",
				data : {
					"opr" : "update",
					"gtid" : ${goodsType.gtid},
					"uid" : ${goodsType.uid},
					"gtstate" : ${goodsType.gtstate},
					"gtname" : $("#gtname").val(),
					"gtdesc" : $("#gtdesc").val()
				},
				dataType : "JSON",
				success : function(result) {
					if (result.msg == "ok") {
						alert("商品类别修改成功！");
						history.go(-1);
					} else if (result.msg == "null") {
						alert("请重新登录！");
						location.href = "login.jsp";
					} else {
						alert(result.msg);
					}
				}
			})
		}
	}

	//检查商品类别名格式是否正确
	function checkGtname() {
		let zz = /^[a-zA-Z0-9\u4e00-\u9fa5]{4,20}$/;
		let gtnameVal = $("#gtname").val();
		if (zz.test(gtnameVal)) {
			$.ajax({
				url : "../goodsType",
				type : "post",
				data : {
					"opr" : "checkGtname",
					"gtname" : gtnameVal
				},
				dataType : "JSON",
				success : function(result) {
					if (result.msg == "ok") {
						$("#gtnameMsg").html("<font color='green'>✔</font>");
						gtnameFlag = true;
					} else if (result.msg == "used") {
						$("#gtnameMsg").html(
								"<font color='red'>该商品类别已存在。</font>");
						gtnameFlag = false;
					} else {
						alert(result.msg);
						gtnameFlag = false;
					}
				}
			})
			$("#gtnameMsg").html("<font color='green'>✔</font>");
			return true;
		} else {
			$("#gtnameMsg").html(
					"<font color='red'>商品类别名由字母、数字和汉字组成，长度必须在4-10位之间。</font>");
			return false;
		}
	}

	//检查商品类别描述长度是否超标
	function checkGtdesc() {
		let gtdescVal = $("#gtdesc").val();
		if (parseInt(gtdescVal.length) < 200) {
			$("#gtdescMsg").html("<font color='green'>✔</font>");
			return true;
		} else {
			$("#gtdescMsg").html(
					"<font color='red'> 商品介绍不能超过200个字符(当前字符数："
							+ gtdescVal.length + ")。</font>");
			return false;
		}
	}
</script>
</html>
